<template>
    <div class="wechat-binding">
        <div class="wrap" :style="{height:height+'px'}">
            <div class="card" style="margin-top: 40%">
                <div style="display: flex;color: rgba(255, 255, 255, .8);margin: 10px 0">
                    <div class="mint-tab-item" @click="clickTab('login')" style="color: cyan">登录</div>
                    <div class="mint-tab-item" @click="clickTab('logon')">注册</div>
                </div>
                <div>
                    <mt-field placeholder="请输入手机号" type="tel" v-model="user.name"></mt-field>
                    <mt-field v-if="isSelected==='logon'" placeholder="请输入验证码" readonly disableClear
                              v-model="user.code">
                        <mt-button v-if="!showCount" size="small" plain style="height: 19px;color:#2699FB;"
                                   @click="clickCode">获取验证码
                        </mt-button>
                        <mt-button v-if="showCount" size="small" plain style="height: 19px;color: #707070;">{{count}}s
                        </mt-button>
                    </mt-field>
                    <mt-field placeholder="请输入密码" type="password" v-model="user.password"></mt-field>
                    <mt-button style="margin-top: 30px" @click="clickBinding">{{isSelected==='logon'?'注册绑定':'绑定'}}
                    </mt-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                height: app.config.setting.height.display,
                url: app.config.api.wechat.telephone,
                isSelected: 'login',
                count: 150,
                showCount: false,
                user: {
                    name: '',
                    password: '',
                    code: ''
                }
            }
        },
        watch: {
            'user.name': function (val) {
                if (this.user.code) {
                    this.user.code = '';
                }
                if (this.user.password) {
                    this.user.password = '';
                }
            }
        },
        methods: {
            clickTab(tab) {
                this.user.name = '';
                this.user.code = '';
                this.user.password = '';
                let arr = document.getElementsByClassName('mint-tab-item');
                if (tab === 'login') {
                    arr[0].setAttribute('style', 'color:cyan');
                    arr[1].setAttribute('style', 'color:rgba(255, 255, 255, .8)');
                    this.url = app.config.api.wechat.telephone;
                } else if (tab === 'logon') {
                    arr[0].setAttribute('style', 'color:rgba(255, 255, 255, .8)');
                    arr[1].setAttribute('style', 'color:cyan');
                    this.url = app.config.api.wechat.register;
                }
                this.isSelected = tab;
            },
            clickCode() {
                if (!this.user.name) {
                    this.$toast({
                        position: 'top',
                        message: '请先填写手机号码'
                    });
                    return
                }
                if (!app.util.validate('telephone', this.user.name)) {
                    this.$toast({
                        position: 'top',
                        message: '请正确填写手机号码'
                    });
                    return
                }
                app.ajax.get(app.config.api.wechat.code + this.user.name, {}, (res) => {
                    Object.assign(this.user, {code: res.data});
                    this.showCount = true;
                    this.countDown();
                });
            },
            clickBinding() {
                if (!this.user.name || !app.util.validate('telephone', this.user.name)) {
                    this.$toast({
                        position: 'top',
                        message: '请正确填写手机号码'
                    });
                    return
                }
                if (this.isSelected === 'logon' && !this.user.code) {
                    this.$toast({
                        position: 'top',
                        message: '验证码不得为空'
                    });
                    return
                }
                if (!this.user.password || !app.util.validate('password', this.user.password)) {
                    this.$toast({
                        position: 'top',
                        message: '密码为6-20位，数字、字母、特殊字符中的至少两种'
                    });
                    return
                }

                app.ajax.post(this.url, {
                    name: this.user.name,
                    code: this.isSelected === 'logon' ? this.user.code : undefined,
                    password: app.util.md5(this.user.password)
                }, (res) => {
                    app.util.sessionStorage('token', res.data.token);
                    setTimeout(() => {
                        this.$router.push({name: 'index'})
                    }, 2000)
                });
            },
            countDown() {
                this.count = 150;
                let countInterval = setInterval(() => {
                    this.count--;
                    if (this.count === 0) {
                        clearInterval(countInterval);
                        this.showCount = false;
                    }
                }, 1000)
            }
        },
        mounted() {
            let token = window.location.href.split('?')[1];
            app.util.sessionStorage('token', token.split('=')[1]);
        }
    }
</script>
<style>
    .wechat-binding {
        background-image: url("../../img/29346bf99fdbd05983fada6867eba623bed1c292393da-Z4mpnr.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        z-index: 1;
    }

    .wechat-binding:after {
        content: "";
        background: inherit;
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        filter: blur(3px);
    }

    .wechat-binding .wrap {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        text-align: center;
        z-index: 11;
    }

    .wechat-binding .card {
        width: 70%;
        margin: 0 15%;
    }

    .wechat-binding input {
        background-color: inherit;
    }

    .wechat-binding .mint-cell {
        background: inherit;
    }

    .wechat-binding .mint-cell-wrapper {
        background-position: bottom left;
        background-origin: padding-box;
    }

    .wechat-binding .mint-field .mint-cell-value {
        width: 100%;
    }

    .wechat-binding .mint-field-core {
        color: rgba(255, 255, 255, .8);
    }

    .wechat-binding .mint-button--primary {
        width: 100%;
    }

    .wechat-binding .mint-button--default {
        width: 100%;
        border-radius: 30px;
        margin: 10px 0;
    }

    .wechat-binding .mint-field-other .mint-button--small {
        padding: 0;
    }
</style>
